<template>
    <div>One</div>
</template>

<script>
export default {

}
</script>

<style scoped>
/*
1 默认的style样式，会作用于全局 --> 全局样式
2 加上scoped属性的style样式，只会作用于当前组件  局部样式
------------------------------------------------
组件应该有着自己独立的样式，推荐加上scoped(原理)
scoped原理:
1 给当前组件模板的所有元素，都会被添加上一个自定义属性
    data-v-hash值(例如: data-v-5f6a9d56) 用来区分开不同的组件
2 css选择器后面，被自动处理，添加上了属性选择器 
最终效果: 必须是当前组件的元素,才会有这个自定义属性,才会被这个样式作用到   
     
 */
div {
    border: 3px solid blue;
    margin: 30px;
}
</style>